<template>
  <div>
                    
      <div style="display:flex;flex-direction:column">

        <div id="main_container">
          <div id="core" class="core core_margin1">
            <div class="editorSet clearfix">
              <div>
             
                <div class="editor">
                  <a class="submit-btn" @click="format">格式化</a>
                  <span class="label">javascript</span>                   
                  <div ref="ace" class="edit-area"></div>
                </div>

              </div>
            </div>
          </div>
        </div>
          <div style="margin-top:30px">
            <el-button type="primary" @click="editSubmit" style="float: right;">确 定</el-button>
            <el-button @click="cancel" style="float: right;margin-right:20px">取 消</el-button>
          </div>
      </div>

</div>
</template>
<script>
import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/theme-monokai"; // 默认设置的主题
import "ace-builds/src-noconflict/mode-javascript"; // 默认设置的语言模式
import {js_beautify} from '../../../../../cms/js/beautify.js'
export default {
  props: ["customData"],
  components: {

  },
  data() {
    return {
      aceEditor: null,
      themePath: "ace/theme/monokai", // 不导入 webpack-resolver，该模块路径会报错
      modePath: "ace/mode/javascript", // 同上
      data: this.customData,
    };
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.aceEditor = ace.edit(this.$refs.ace, {
        maxLines: 30, // 最大行数，超过会自动出现滚动条
        minLines: 25, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
        fontSize: 14, // 编辑器内字体大小
        theme: this.themePath, // 默认设置的主题
        mode: this.modePath, // 默认设置的语言模式
        tabSize: 4, // 制表符设置为 4 个空格大小
        showPrintMargin: false, //去除编辑器里的竖线
      });
      if(this.data != undefined){
        this.aceEditor.setValue(this.data);
      }
    });
  },
  methods: {
    editData(){
    },
    editSubmit() {
      this.$emit("submitData", JSON.parse(JSON.stringify( this.aceEditor.getValue() )));
    },
    cancel(){
      this.$emit("cancelData", "");
    },
    format(){
      let val = this.aceEditor.getValue();
      //格式化
      var jsbOpts = { 
 
          indent_size : 4
      
      }; 
      this.aceEditor.setValue(js_beautify(val, jsbOpts))
    }
  },
};
</script>
<style scoped>



.NightTheme .editorSet .editor {
  -webkit-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
  -moz-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
  box-shadow: inset 0 1px 3px rgb(22, 26, 27);
}

.label {
  background: rgba(230, 230, 230, 0.5);
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  z-index: 999;
  text-align: center;
  font-size: 12px;
  color: #bbb;
  border-radius: 3px;
}

.editor iframe {
  border: 0 !important;
  min-height: 100px;
  min-width: 100px;
  height: 100%;
  width: 100%;
}

.submit-btn {
  color: #fff;
  background-color: #67c23a;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #67c23a;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.app-btn {
  color: #fff;
  background-color: #0144fd;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #0144fd;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.edit-area {
  height: 100%;
}
</style>